<template>
  <div class="vuex-list">
    <div class="container">
      <div class="tabs">
        <ul>
          <li @click.prevent="change('all')"><a>全部({{ todos.length }})</a></li>
          <li @click.prevent="change('uncompleted')"><a>未完成({{ uncompletedList.length }})</a></li>
          <li @click.prevent="change('completed')"><a>已完成({{ completedList.length }})</a></li>
        </ul>
      </div>
      <div class="columns is-multiline is-mobile">
          <div class="column is-one-quarter" v-for="todo in listVuex" :key="todo.id">
              <TodoItem
                v-bind="todo"
              />
          </div>
      </div>
    </div>
  </div>
</template>

<script>
import TodoItem from './todoItem-vuex'
export default {
  name: 'vuexList',
  components: {
    TodoItem
  },
  data() {
    return {
      listVuex: this.$store.state.todos,
      status: 'all'
    }
  },
  computed: {
    todos() {
      return this.$store.state.todos
    },
    completedList() {
      return this.todos.filter(todo => {
        return todo.completed === true
      })
    },
    uncompletedList() {
      return this.todos.filter(todo => {
        return todo.completed === false
      })
    }
  },
  methods: {
    change(type) {
      switch (type) {
        case 'all' :
          this.listVuex = this.todos
          break
        case 'uncompleted' :
          this.listVuex = this.uncompletedList
          break
        case 'completed' :
          this.listVuex = this.completedList
          break
      }
      this.status = type
    }
  },
  watch: {
    todos() {
      this.change(this.status)
    }
  }
}
</script>

<style lang="scss" scoped>

</style>
